<template>
	<view class="container">	
		<view class="signle" style="margin-top: 30rpx;">
			<view class="left">群组名称</view>
			<input style="flex: 2;" v-model="name" @click="checkRole()" :disabled="_disable" placeholder="输入群组名称"/>
		</view>
		<view class="signle">
			<view class="left">我的群昵称</view>
			<input style="flex: 2;" v-model="nickname" placeholder="输入我在本群组的昵称" />
		</view>
		<view class="signle">
			<view class="left">群组成员</view>
			<view style="flex: 2;display: flex;align-items: center;" >
				<text style="color: #999999;flex: 1;font-size: 28rpx;height: 60rpx;line-height: 60rpx"  @click="navTo()">{{str}}</text>
				<text class="cell-icon yticon icon-you" style="margin-right: 40rpx;margin-top: 8rpx;float: right;color: #808080;"></text>
			</view>
		</view>
		<view class="bottom-btn" @click="saveClusterInfo()">
			<view class="btn">确定</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import Api from '@/common/api';
	export default{
		
		data(){
			return {
					id:0,
					nickname:'',
					name:'',
					str:'邀请成员',
					role:0,
					_disable:''
				}
		},
		onLoad(option){
			// this.id = option.id;
			// if(this.id){
			// 	this.clusterInfo()
			// }
			
		},
		onShow(){
			let option=this.$api.currentPageOption();
			if(option.id!=0){
				this.id = option.id;
			}
			if(this.id!=0){
				this.clusterInfo()
			}	
		},
		onReachBottom(){
			
		},
		onShareAppMessage(res){
			return {
				title:'邀请你加入接龙群组'+this.name,
				path:'/pages/group/invite?id='+this.id,
				imageUrl:'/static/temp/invite.png',
				
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
			setNickname(){
				if(this.hasLogin&&!this.id){
					this.nickname=this.$store.state.userInfo.user_info.nickname;
				}
			},
		},
		methods: {
			checkRole(){
				if(this.role!=1){
					this.$api.msg(`仅群主可修改群主名称`)
				}
			},
			async saveClusterInfo(){
				let params ={id:this.id,nickname:this.nickname,name:this.name}
				console.log(params)
				let data = await Api.apiCall('post',Api.apiName.cluster_save,params);
				if(!data){
					return;
				}
				this.$api.msg(`保存成功`);
				setTimeout(function(){
					uni.navigateBack(-1)
				},1500)
				
			},
			async clusterInfo(){
				let data = await Api.apiCall('get',Api.apiName.cluster_detail,{id:this.id});
				if(!data){
					return;
				}
				this.nickname=data.data.nickname;
				this.name=data.data.name;
				this.str = data.data.cluster_member_count+'人';
				this.role = data.data.role;
				if(this.role!=1){
					this._disable='disabled'
				}
			},
			async navTo(){
				if(this.name==''){
					this.$api.msg(`请输入群名称`);
					return;
				}
				if(this.id==0){
					let data = await Api.apiCall('post',Api.apiName.cluster_save,{id:this.id,nickname:this.nickname,name:this.name},true);
					if(!data){
						return;
					}
					this.id=data.data.id;
					this.name=data.data.name;
					uni.navigateTo({
						url:'/pages/group/list?id='+this.id
					})
					
				}else{
					uni.navigateTo({
						url:'/pages/group/list?id='+this.id
					})
				}
			},
			reloadId(data){
				this.id=data;
				this.clusterInfo()
			},
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.container{
		display: flex;
		flex-direction: column;
	}
	.signle{
		background: #FFFFFF;
		border-bottom: 1px solid rgba(204,204,204,0.4);
		display: flex;
		align-items: center;
	}
	.left{
		padding: 30rpx;
		font-size: 32rpx;
		/* width: 35%; */
		flex:1
	}
	.bottom-btn{
		position: fixed;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		padding: 30rpx 20rpx;
		text-align: center;
		z-index: 2;
	}
	.btn{
		background: #23A948;
		border-radius: 8rpx;
		padding: 20rpx;
		color:#FFFFFF;
	}
	button{
		background: none !important;
		line-height: 60rpx !important;
		height: 60rpx !important;
		font-size: 28rpx !important;
		color:#999999 !important;
		flex: 1;
		display: flex;
		padding-left: 0rpx;
	}
	button::after{
		border: none !important;
	}
</style>
